<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息修改页面</title>
</head>
<body>
    <form id="studentInfo">
        <div>
            用户名: <input type="text" name="studentName" id="studentName">
        </div>
        <div>
            真实姓名: <input type="text" name="realName" id="realName">
        </div>

        <div>
            性别: 男 <input type="radio" name="gender">
                  女<input type="radio" name="gender">
        </div>

        <div>
            手机号: <input type="text" id="phoneNo" name="phoneNo">
        </div>

        <div>
            学校: <input type="text" id="schoolName" name="schoolName">
        </div>

        <div>
            年龄: <input type="text" id="age" name="age">
        </div>
        
        <div>
            <input type="button" value="修改" id="updateStudentBtn">
        </div>
    </form>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

    $.fn.serializeObject = function(){
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
        // return JSON.stringify(o); <!--将json对象转成json字符串-->
    }


    $(document).ready(function (){
        //程序一开始，直接发起ajax请求，获取用户的原始数据
        // $.ajax({
        //     method:'get',
        //     url:'student?action=getStudentInfo',
        //     type:'json',
        //     success:function (result){
        //         var student = result.data;
        //
        //         $("#studentName").val(student.stuName);
        //
        //     }
        // })

        //点击修改时，进行数据的修改操作
        $("#updateStudentBtn").click(function (){
            var data = $("#studentInfo").serializeObject();

            $.ajax({
                method:'post',
                url:'student?action=updateStudentInfo',
                data: data,
                type:'json',
                success:function (result){

                }
            })
        })
    })
</script>